<template>  
  <view class="zero">  
    <uni-card>  
      <view class="text">Zero登录</view>  
      <view style="margin-top: 10px;"></view>  
      <view class="input-container">  
        <view style="display: flex; justify-content: center;">  
          <view class= "zc" style="font-size: 10px;">注册</view>  
          <uv-input placeholder="请输入QQ" border="surround" @change="change"></uv-input>  
        </view>  
        <view style="margin-top: 10px;"></view> <!-- Add a separator with 10px spacing -->  
        <view style="display: flex; justify-content: center;">  
          <view class= "zc" style="font-size: 10px;">登录</view>  
          <uv-input placeholder="请输入密码" border="surround" @change="change"></uv-input>  
        </view>  
      </view> 
	   <uv-button text="登录" size=" large"  class= "zc" style="width: 260px; height: 50px; margin-left: 40px; display: flex;  justify-content: center;    align-items: center;  "></uv-button>
    </uni-card>  
  </view>  
</template>
  
<script>  
export default {  
  data() {  
    return {  
    };  
  },  
  methods: {  
    change() {  
      // Handle the change event here if needed  
    }  
  }  
};  
</script>  
  
<style scoped>  
.zc{
	margin-top: 10px;
}
.text {  
  font-size: 25px; /* 调整字体大小 */  
  color: #333; /* 调整字体颜色 */  
  text-align: center; /* 文字居中显示 */  
}  
.input-container {  
  display: flex;  
  flex-direction: column;  
}  
.input-container uv-input {  
  margin-top: 10px; /* Add margin to top of input */  
}  
</style>